Summary

Design/polish pass on the global search composer (the pill + its header) reviewed at desktop, medium (tablet) and small (phone) widths, in light and dark, with a second independent UI review. All changes are scoped to the composer's visual chrome and interactive-control states — no behavioural or data changes.

• Idle send button → clean two-state affordance. When there is nothing to send it now reads as a calm neutral control (surface-subtle fill + inset ring + muted glyph) and turns accent the moment a query makes it actionable, replacing the muddy faded-teal (a 50%-opacity accent fill with a bleeding colour glow) on the empty hero.
• Restore feedback on the + compose trigger. An unlayered background: transparent was silently suppressing both the hover utility and the open-state background, so the primary compose action had no tactile response and stayed flat even while its menu was open. Hover + [aria-expanded="true"] are now restored as unlayered rules.
• Clear (x) button rhythm. It now scales 44→48px at ≥640px so it matches the + and send buttons instead of sitting a size smaller in the pill row on tablet/desktop.
• Consistent submit glyph. The send/spinner icon is unified at 20px (size-icon-lg) with the mode/search affordances it swaps between (was 16px only for those two states).
• Divider refinement. The field/send separator fades at both ends rather than reading as a hard bar.
• Workflow-header mode button responsive fix. Its smaller variant was dead code — the size utilities were duplicated in the shared base string, and Tailwind v4's canonical ordering let the base win at every breakpoint but lg:. Size utilities now live in the per-variant branch so the intended compact size actually applies. The default (main search) header button is unchanged.
• Reduced motion keeps the +→x state. Dropped the motion-safe: gate — the global reduced-motion rule already makes the transform instant, so gating removed the open-state affordance entirely for those users.
• Forced-colors + perf + cleanup. Extended the forced-colors block to force the pill/divider/chip opaque (they used color-mix(...transparent) that thinned system-colour contrast next to the already-forced header); dropped a wasted backdrop-filter on the opaque phone-dock pill; consolidated two duplicate max-width:430px blocks; and removed a dark-mode no-op that was overriding the new hover colours.

Files: src/app/globals.css, src/components/clinical-dashboard/master-search-header.tsx, src/components/clinical-dashboard/mode-action-popup.tsx.

Verification

• npm run verify:pr-local — UI verification not run: sandbox limitation. The environment shipped an incomplete node_modules (test devDependencies absent) and a pre-installed Chromium (1194) mismatched to the pinned Playwright's expected build, so the gate's isolated production build could not run until the dev deps were installed and the browser pinned via PLAYWRIGHT_CHROMIUM_EXECUTABLE_PATH. The relevant checks were run directly instead (below), and CI runs the full gates.
• npm run verify:ui — ran the relevant Chromium specs directly:
  • tests/ui-overlap.spec.ts — 12/12 pass (header controls don't overlap at 640/768/1024/1152/1280/1366/1440/1536px; clear button doesn't cover typed text at mobile + desktop; smart-search layout).
  • tests/ui-universal-search.spec.ts — 14/14 pass (command surface / typeahead).
  • tests/ui-accessibility.spec.ts + tests/ui-smoke.spec.ts — 91/92 pass. The one failure (document viewer puts the PDF preview first…) is a pdf.js canvas that does not paint under the mismatched Chromium build; it fails identically on a clean tree (changes stashed), so it is pre-existing/environmental and unrelated to this diff (which does not touch the document viewer).
• npm run typecheck — exit 0 across the project.
• npm run lint — exit 0.

Also verified visually (live rendered screenshots) at desktop/tablet/phone in light + dark, and via computed-style checks confirming: the idle send is surface-subtle/opacity:1, the + hover applies, and the forced-colors pill/divider render opaque.

Risk and rollout

• Risk: Low. UI-only chrome changes (CSS + two className strings + one motion utility). No API, data, auth, retrieval, or provider surface is touched.
• Rollback: revert the single feature commit on this branch and redeploy.
• Provider or production effects: None.

Clinical Governance Preflight

This change is limited to the search composer's visual chrome (CSS + two className strings + one motion utility) and alters no clinical behaviour; the path-based policy classifies it as clinical-risk only because the edited files live under clinical-dashboard. Every invariant below is preserved by the change:

• Source-backed claims still require linked source verification before clinical use
• No patient-identifiable document workflow was introduced or expanded without explicit governance approval
• Supabase target remains Clinical KB Database (sjrfecxgysukkwxsowpy)
• Service-role keys and private document access remain server-only
• Demo/synthetic content remains clearly separated from real clinical sources
• Source metadata, review status, and outdated/unknown-source behavior remain conservative
• Deployment classification/TGA SaMD impact was checked when clinical decision-support behavior changed

Notes

The full verify:pr-local / verify:ui wrappers were not run verbatim for the sandbox reasons noted under Verification; the constituent UI/lint/type checks were run directly and CI runs the full gates on this PR.

🤖 Generated with Claude Code